<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="" v-if="is_null(from)">
        <el-breadcrumb-item v-if="!title"
          ><div class="div1">订单管理</div></el-breadcrumb-item
        >
        <el-breadcrumb-item v-if="!title" :to="{ name: 'orderList' }"
          ><div class="div3">我的订单</div></el-breadcrumb-item
        >
        <el-breadcrumb-item v-if="!title"
          ><div class="div2">订单详情</div></el-breadcrumb-item
        >

        <el-breadcrumb-item v-if="title"
          ><div class="div1" @click="$router.back(-1)">
            客户管理
          </div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          v-if="!is_null(content.orderUser) && title"
          :to="{
            name: 'customerListOrder',
            query: { id: content.orderUser.userId },
          }"
          ><div class="div3">客户订单</div></el-breadcrumb-item
        >
        <el-breadcrumb-item v-if="title"
          ><div class="div2">订单详情</div></el-breadcrumb-item
        >
      </el-breadcrumb>
      <el-breadcrumb separator="" v-else>
        <el-breadcrumb-item v-if="!title"
          ><div class="div1">客户管理</div></el-breadcrumb-item
        >
        <el-breadcrumb-item v-if="!title" :to="{ name: 'customersList' }"
          ><div class="div3">客户列表</div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          v-if="!title"
          :to="{
            name: 'customerInformation',
            query: { unavName: 1, uid: uid, id: id },
          }"
          ><div class="div3">消费记录</div></el-breadcrumb-item
        >
        <el-breadcrumb-item v-if="!title"
          ><div class="div2">消费详情</div></el-breadcrumb-item
        >

        <el-breadcrumb-item v-if="title"
          ><div class="div1" @click="$router.back(-1)"></div
        ></el-breadcrumb-item>
        <el-breadcrumb-item
          v-if="!is_null(content.orderUser) && title"
          :to="{
            name: 'customerInformation',
            query: { id: content.orderUser.userId },
          }"
          ><div class="div3">消费记录</div></el-breadcrumb-item
        >
        <el-breadcrumb-item v-if="title"
          ><div class="div2">消费详情</div></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="money" v-if="!is_null(from)">
      <div class="headerNav">
        <span>收货信息</span>
        <div class="right">
          <!-- content.orderUser.awaitIncomeMoney > 0 && -->
          <p @click="examineLogistics()">
            <el-button type="primary" size="mini">查看物流</el-button>
          </p>
        </div>
      </div>
      <div style="margin-left: 10px; font-size: 15px; margin-top: 14px">
        <span v-if="!is_null(logistics) && !is_null(logistics.orderStatus)">
          {{
            logistics.orderStatus == 1
              ? "待签收"
              : "暂无" || logistics.orderStatus == 2
              ? "已签收"
              : "暂无"
          }}
        </span>
        <span v-else>暂无物流信息</span>
      </div>
      <div style="margin-left: 10px; font-size: 15px; margin-top: 14px">
        <span v-if="!is_null(logistics) && !is_null(logistics.logisticsCompany)"
          >{{
            logistics.logisticsCompany ? logistics.logisticsCompany : "暂无"
          }}
          : {{ logistics.parcelNumber ? logistics.parcelNumber : "暂无" }}</span
        >
      </div>
    </div>
    <!-- 展示收款金额 -->
    <div class="money" v-if="!is_null(content.orderUser)">
      <div class="headerNav">
        <span>金额状态</span>
        <div class="right" v-if="is_null(from)">
          <!-- content.orderUser.awaitIncomeMoney > 0 && -->
          <p
            v-if="
              parArray.indexOf('wxQrCode') != -1 &&
              Number(content.orderUser.receivedMoney) <
                Number(content.orderUser.total)
            "
            @click="qrtypeEvent(1)"
          >
            <el-button type="primary" size="mini">生成支付二维码</el-button>
          </p>
          <p
            v-if="
              content.orderUser.logisticsOrder &&
              parArray.indexOf('logisticsQrCode') != -1
            "
            @click="qrtypeEvent(2)"
          >
            <el-button type="primary" size="mini">生成物流二维码</el-button>
          </p>
          <p
            v-if="parArray.indexOf('transactionHistory') != -1"
            @click="transactionrecord()"
          >
            <el-button type="primary" size="mini">交易记录</el-button>
          </p>
        </div>
      </div>
      <div class="contentTotal">
        <p>
          <span>已收金额：￥{{ content.orderUser.receivedMoney }}</span>
        </p>
        <p>
          <span>待收金额：￥{{ content.orderUser.awaitIncomeMoney }}</span>
        </p>
        <p>
          <span>总金额：￥{{ content.orderUser.total }}</span>
        </p>
      </div>
    </div>
    <!-- 面包屑导航 -->
    <div class="state">
      <p class="header" v-if="!is_null(content.orderUser)">
        订单状态：{{ content.orderUser.orderType }}
      </p>
      <ul>
        <li>
          <p v-if="content.orderUser && content.orderUser.userIntentionName">
            客户类型：{{ content.orderUser.userIntentionName }}
          </p>
          <p v-if="content.orderUser && content.orderUser.customerUser">
            入线方式：{{ content.orderUser.customerUser.userDitchName }}
          </p>
          <p v-if="content.orderUser && content.orderUser.customerUser">
            入线时间：{{ content.orderUser.customerUser.ditchTime }}
          </p>
          <p v-if="!is_null(content.orderUser)">
            下单时间：{{ content.orderUser.createdTime }}
          </p>
          <p v-if="!is_null(content.orderUser)">
            订单编号：{{ content.orderUser.orderIdStr }}
          </p>
          <p v-if="is_null(content.orderUser)">发货时间：空</p>
          <p
            v-if="
              !is_null(content.orderUser) &&
              !is_null(content.orderUser.logisticsOrder)
            "
          >
            发货时间：{{ content.orderUser.logisticsOrder.deliveryTime }}
          </p>
          <p
            v-if="
              !is_null(content.orderUser) &&
              !is_null(content.orderUser.logisticsOrder)
            "
          >
            签收时间：{{ content.orderUser.logisticsOrder.signTime }}
          </p>
          <p v-if="is_null(content.orderUser)">签收时间：空</p>
        </li>
        <li>
          <p
            v-if="
              !is_null(content.orderUser) &&
              !is_null(content.orderUser.logisticsOrder)
            "
          >
            物流公司：{{ content.orderUser.logisticsOrder.logisticsCompany }}
          </p>
          <p
            v-if="
              !is_null(content.orderUser) &&
              !is_null(content.orderUser.logisticsOrder)
            "
          >
            物流订单号：{{ content.orderUser.logisticsOrder.parcelNumber }}
          </p>
        </li>
        <!-- orderStatus  1-待签收 2-已签收 -->
        <li>
          <el-button
            v-if="
              !is_null(content.orderUser) &&
              !is_null(content.orderUser.logisticsOrder) &&
              content.orderUser.logisticsOrder.orderStatus == '1' &&
              parArray.indexOf('dqskhqs') != -1
            "
            size="mini"
            type="primary"
            @click="customerSign"
            >客户签收</el-button
          >
          <el-button
            v-if="
              !is_null(content.orderUser) &&
              !is_null(content.orderUser.logisticsOrder) &&
              content.orderUser.logisticsOrder.orderStatus == '2' &&
              parArray.indexOf('yqsxgwwqs') != -1
            "
            type="primary"
            size="mini"
            @click="cancelSign"
            >修改未签收</el-button
          >
        </li>
      </ul>
    </div>
    <div class="address">
      <p class="header">收货人信息</p>
      <ul>
        <li>
          <p v-if="!is_null(content.orderUser)">
            收货人姓名：{{ content.orderUser.addressName }}
          </p>
          <p v-if="!is_null(content.orderUser)">
            联系电话：{{ content.orderUser.addressPhone }}
          </p>
          <p v-if="!is_null(content.orderUser)">
            收货地址：{{ content.orderUser.address }}
          </p>
        </li>
        <!-- 			<li>
									<p>详细地址：广州白云区江夏</p>
								</li> -->
        <li v-if="content.orderUser">
          <p v-if="!is_null(content.orderUser.comment)">
            备注：{{ content.orderUser.comment }}
          </p>
          <p v-if="is_null(content.orderUser.comment)">备注：无</p>
        </li>
      </ul>
    </div>
    <div class="orderBox">
      <p class="header">订单商品</p>
      <el-table :data="content.orderCommodityList" style="width: 100%">
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column
          prop="number"
          label="商品数量"
          width="180"
        ></el-table-column>
        <el-table-column prop="price" label="商品单价"></el-table-column>
        <el-table-column prop="brandName" label="商品品牌"></el-table-column>
        <el-table-column prop="typeName" label="商品分类"></el-table-column>
        <el-table-column
          prop="specificationName"
          label="商品规格"
        ></el-table-column>
        <el-table-column prop="total" label="商品小计"></el-table-column>
      </el-table>
      <el-table :data="content.orderComplimentaryList" style="width: 100%">
        <el-table-column
          prop="complimentaryName"
          label="赠品名称"
        ></el-table-column>
        <el-table-column
          prop="number"
          label="赠品数量"
          width="180"
        ></el-table-column>
        <el-table-column prop="price" label="赠品单价"></el-table-column>
        <el-table-column prop="brandName" label="赠品品牌"></el-table-column>
        <el-table-column prop="typeName" label="赠品分类"></el-table-column>
        <el-table-column
          prop="specificationName"
          label="赠品规格"
        ></el-table-column>
        <el-table-column prop="total" label="赠品小计"></el-table-column>
      </el-table>
    </div>
    <div class="total">
      <p v-if="!is_null(content.orderUser)">
        总计：共 {{ content.orderUser.pieceNumber }} 件
      </p>
      <p v-if="!is_null(content.orderUser)">
        运费：{{ content.orderUser.charge }}
      </p>
      <p v-if="!is_null(content.orderUser)">
        总价：{{ content.orderUser.money }}
      </p>
    </div>

    <div class="fix" v-if="gdJuage">
      <el-tabs v-model="gdActive" @tab-click="handleClick">
        <el-tab-pane label="改单前记录" name="before">
          <div class="address" style="margin: 0; padding: 0">
            <p class="header">改单前收货地址</p>
            <ul>
              <li>
                <p v-if="!is_null(tableData.userChangeBefore)">
                  收货人姓名：{{
                    tableData.userChangeBefore.orderUserChange.addressName
                  }}
                </p>
                <p v-if="!is_null(tableData.userChangeBefore)">
                  联系电话：{{
                    tableData.userChangeBefore.orderUserChange.addressPhone
                  }}
                </p>
                <p v-if="!is_null(tableData.userChangeBefore)">
                  收货地址：{{
                    tableData.userChangeBefore.orderUserChange.address
                  }}
                </p>
              </li>
              <li>
                <p>备注：无</p>
              </li>
            </ul>
          </div>
          <el-table
            v-if="!is_null(tableData.userChangeBefore)"
            :data="tableData.userChangeBefore.commodityChangeList"
            style="width: 100%"
          >
            <el-table-column prop="name" label="商品名称"></el-table-column>
            <el-table-column prop="number" label="商品数量"></el-table-column>
            <el-table-column prop="price" label="商品单价"></el-table-column>
            <el-table-column
              prop="brandName"
              label="商品品牌"
            ></el-table-column>
            <el-table-column prop="typeName" label="商品分类"></el-table-column>
            <el-table-column
              prop="specificationName"
              label="商品规格"
            ></el-table-column>
            <el-table-column prop="total" label="商品小计"></el-table-column>
            <el-table-column
              prop="updatedTime"
              label="更新时间"
            ></el-table-column>
          </el-table>
          <el-table
            v-if="!is_null(tableData.userChangeBefore)"
            :data="tableData.userChangeBefore.complimentaryChangeList"
            style="width: 100%"
          >
            <el-table-column
              prop="complimentaryName"
              label="赠品名称"
            ></el-table-column>
            <el-table-column prop="number" label="赠品数量"></el-table-column>
            <el-table-column prop="price" label="赠品单价"></el-table-column>
            <el-table-column
              prop="brandName"
              label="赠品品牌"
            ></el-table-column>
            <el-table-column prop="typeName" label="赠品分类"></el-table-column>
            <el-table-column
              prop="specificationName"
              label="赠品规格"
            ></el-table-column>
            <el-table-column prop="total" label="赠品小计"></el-table-column>
            <el-table-column
              prop="updatedTime"
              label="更新时间"
            ></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 支付弹框 -->
    <el-dialog
      :title="qrtype == 1 ? '设置微信支付二维码' : '物流二维码'"
      :visible.sync="dialogVisible"
      width="50%"
      append-to-body
    >
      <div class="qrcode">
        <div class="div">
          <span>公众号：</span>
          <el-select
            v-model="officialVal"
            filterable
            placeholder="请选择公众号"
            clearable
            default-first-option
            size="mini"
          >
            <el-option
              v-for="items in official"
              :key="items.id"
              :label="items.name"
              :value="items.id"
            ></el-option>
          </el-select>
        </div>
        <div class="div" v-if="qrtype == 1">
          <span>订单金额：</span>
          <el-input-number
            :mix="0"
            :precision="2"
            :max="content.orderUser.awaitIncomeMoney"
            v-model="orderMoney"
            size="mini"
          ></el-input-number>
        </div>
      </div>
      <!-- <div id="contentQr"></div> -->
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          v-if="qrtype == 1"
          size="mini"
          @click="generate()"
          >生成二维码</el-button
        >

        <el-button
          type="primary"
          v-if="qrtype == 1"
          size="mini"
          @click="pushOrderInfo()"
          >微信推送</el-button
        >

        <el-button
          type="primary"
          v-if="qrtype == 2"
          size="mini"
          @click="generate()"
          >确 定</el-button
        >

        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 支付弹框 -->
    <!-- 二维码弹框 -->
    <el-dialog
      :title="qrtype == 1 ? '微信支付二维码' : '物流二维码'"
      :visible.sync="qrHidden"
      width="50%"
      append-to-body
    >
      <div id="contentQr"></div>

      <div
        style="text-align: center; margin-top: 40px"
        v-if="qrtype == 1 && orderMoney == 0"
      >
        注：此二维码只供查看订单使用
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="qrHidden = false" size="mini">取 消</el-button>
        <!-- <el-button type="primary" size="mini" @click="qrHidden = false"
          >确 定</el-button
        > -->
      </span>
    </el-dialog>
    <!-- 物流信息弹框 -->
    <el-dialog
      title="物流信息"
      :visible.sync="distributionDialogVisible"
      width="30%"
      :before-close="handleCloseDistribution"
      append-to-body
    >
      <div
        style="max-height: 300px; overflow: scroll"
        v-if="logistlist.length != 0"
      >
        <div>
          <span style="margin-left: 20px">{{ logistlist.expTextName }}</span>
          <span style="margin-left: 15px">{{ logistlist.mailNo }}</span>
        </div>

        <el-steps direction="vertical" :active="0" :space="100">
          <el-step
            v-for="(item, index) in logistlist.data"
            :key="index"
            :title="item.context"
            :description="item.time"
          ></el-step>
        </el-steps>
      </div>
      <div v-else>
        <span style="color: #909399; display: flex; justify-content: center">
          暂无物流信息~</span
        >
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="distributionDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="distributionDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 二维码弹框 -->
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
  data () {
    return {
      tableData: [],
      orderId: "",
      content: {},
      activeName: "",
      gdActive: "before",
      gdJuage: false,
      logistlist: [],
      title: false, //判断导航栏
      limits: "",
      parArray: [],
      intention: [],
      dialogVisible: false,
      orderMoney: 0, //支付金额
      officialVal: "", //公众号值
      qrtype: "",
      official: [],
      qrHidden: false,
      id: '',
      distributionDialogVisible: false,//物流信息弹框
      logistics: "",
    };
  },
  created () {
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "orderListCode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    this.title = this.$route.query.title;
    // 权限设定判断
    this.orderId = this.$route.query.orderId;
    this.from = this.$route.query.from
    this.id = this.$route.query.id
    this.uid = this.$route.query.uid
    this.intentionAxios();
    this.detailAxios();
    this.logisticsInformation()

  },
  methods: {

    transactionrecord () {
      this.$router.push({
        name: "transactionrecord",
        query: {
          orderId: this.content.orderUser.orderIdStr,
          orderStatus: this.$route.query.orderStatus,
        },
      });
    },

    // 选择二维码生成还是直接推送
    selectQr () {
      this.$confirm("请选择生成二维码还是推送订单信息, 是否继续?", "提示", {
        confirmButtonText: "二维码",
        cancelButtonText: "推送",
        type: "warning",
      })
        .then(() => {
          this.generate();
        })
        .catch(() => {
          this.pushOrderInfo();
        });
    },

    // 公众号列表
    officialEvent () {
      this.axios
        .post(
          "wechat/wx/config/selectWxNameBySales",
          {
            id: JSON.parse(sessionStorage.getItem("salesAuthorityId")),
            type: this.qrtype,
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.official = res.data;
          } else {
            this.$message.warning(res.message);
          }
        });
    },
    qrtypeEvent (param) {
      this.dialogVisible = true;
      if (param == 1) {
        this.qrtype = 1;
        this.orderMoney = 0;
        this.officialVal = "";
      } else {
        this.qrtype = 2;
        this.orderMoney = 0;
        this.officialVal = "";
      }
      this.officialEvent(); //公众号列表
    },
    // 推送
    pushOrderInfo () {
      if (
        (this.qrtype == 1 && !this.orderMoney.toString()) ||
        (this.qrtype == 1 && this.orderMoney < 0)
      ) {
        this.$message.warning("请核实订单金额是否正确");
        return;
      } else if (this.officialVal == "") {
        this.$message.warning("公众号选择不能为空");
        return;
      }

      this.axios
        .post("/wechat/wx/pay/sendWxMessage", {
          orderId: this.content.orderUser.orderIdStr,
          payMoney: this.orderMoney.toFixed(2),
          type: "1",
          wxId: this.officialVal,
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.dialogVisible = false;
            this.$message.success("订单信息已推送到客户微信");
          } else {
            this.$message.success("推送失败，自动为您生成二维码");
            this.generate();
          }
        });
    },
    // 生成 qrype 1: 支付二维码  2:物流二维码
    generate () {
      // 支付二维码
      if (
        (!this.orderMoney.toString() && this.qrtype == 1) ||
        (this.qrtype == 1 && this.orderMoney < 0)
      ) {
        this.$message.warning("请核实订单金额是否正确");
        return;
      } else if (this.officialVal == "") {
        this.$message.warning("公众号选择不能为空");
        return;
      }

      this.dialogVisible = false;

      this.axios
        .post("/wechat/wx/pay/getWxQrCode", {
          orderId: this.content.orderUser.orderIdStr,
          payMoney: this.orderMoney.toFixed(2),
          type: this.qrtype.toString(),
          wxId: this.officialVal,
        })
        .then((res) => {
          if (res.code == 0) {
            this.qrHidden = true;
            this.$nextTick(() => {
              document.getElementById("contentQr").innerHTML = "";
              new QRCode("contentQr", {
                width: 150,
                height: 150,
                text: res.data,
                colorDark: "#000",
                colorLight: "#fff",
              });
            });
          } else {
            this.$message.error(res.message);
          }
        });
    },
    detailAxios () {
      let typeActive = "";
      let orderStatus = this.$route.query.orderStatus;
      if (
        (sessionStorage.getItem("activeName") == "0" || orderStatus == "1") &&
        this.$route.query.orderStatus != 1
      ) {
        typeActive = 1;
      }
      this.axios
        .get("/order/order/user/detail/" + this.orderId + "?type=" + typeActive)
        .then((res) => {
          if (res.code == 0) {
            console.log(res, "列表")

            this.content = res.data;
            // let name = this.intention.filter((res) => {
            //   return (
            //     res.id == this.content.orderUser.userIntentionId
            //   );
            // })[0].name;
            // this.content.orderUser.userIntentionName = name;
            if (this.content.orderUser.logisticsOrder) {
              this.logistDetail(this.content.orderUser.logisticsOrder.id)

            }
            if (res.data.orderUser.isChange == "1") {
              this.gdRecord();
              this.gdJuage = true;
            } else {
              this.gdJuage = false;
            }
          } else {
            this.$message.error(res.message);
          }
        });
    },
    intentionAxios () {
      this.axios
        .post(
          "/order/comm/customeruser/selectCustomerintention",
          {
            salesAuthorityId: JSON.parse(
              sessionStorage.getItem("salesAuthorityId")
            ),
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.intention = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 查询物流信息
    logisticsInformation () {
      const params = {
        orderId: this.orderId
      }
      this.$api.inquireLogisticsInformation(params).then((res) => {
        if (res.code == 0) {
          console.log(res, "查询物流信息");
          this.logistics = res.data

        }
      }).catch((err) => { console.log(err) })
    },
    // 查询物流跟踪节点
    logistDetail (id) {
      this.axios
        .get(
          "/order/logistics/node/tracking/" + id,
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            console.log(res, '物流节点');
            this.logistlist = res.data;

          } else {
            this.$message.error(res.message);
          }
        });

    },
    // 取消签收
    cancelSign () {
      let array = [];
      array.push(this.content.orderUser.logisticsOrder.id);
      this.axios.get("/order/logistics/cancel/sign/" + array).then((res) => {
        // //console.log(res);
        if (res.code == 0) {
          this.$message.success("取消签收成功");
          this.detailAxios();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 改单记录
    gdRecord () {
      this.axios
        .get("/order/order/change/selectUserChange?orderId=" + this.orderId)
        .then((res) => {
          //console.log(res);
          //console.log('改单记录');
          if (res.code == 0) {
            this.tableData = res.data;
            //console.log(this.tableData.userChangeBefore);
          } else {
            this.$message.error(res.message);
          }
        });
    },
    handleClick (tab, event) {
      console.log(tab, event);
    },

    // 客户签收 &&批量签收
    customerSign () {
      let array = [];
      if (!this.is_null(this.content.orderUser)) {
        array.push(this.content.orderUser.logisticsOrder.id);
      }
      if (this.is_null(array)) {
        this.$message.warning("未选择需要签收的数据");
      } else {
        this.axios
          .get("/order/logistics/confirm/receipt/" + array, {
            headers: {
              isLoading: false,
            },
          })
          .then((res) => {
            //console.log(res);
            if (res.code == 0) {
              this.$message.success("确定签收成功");
              this.detailAxios();
            } else {
              this.$message.error(res.message);
            }
          });
      }
    },
    is_null (content) {
      if (content) {
        return false;
      } else {
        return true;
      }
    },
    // 物流信息弹框关闭
    handleCloseDistribution () {
      this.distributionDialogVisible = false
    },
    // 查看物流
    examineLogistics () {

      this.distributionDialogVisible = true



    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.div3 {
  margin-left: -8px;
  background: url(../../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.header {
  font-size: 15px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.state {
  background: #fff;
  padding: 10px;
  ul {
    margin: 10px 0;
    li {
      margin-left: 50px;
      line-height: 40px;
      font-size: 15px;
      p {
        display: inline-block;
        margin-right: 50px;
      }
      span {
        display: inline-block;
        margin-left: 20px;
        color: #2d7edf;
        font-weight: bold;
      }
    }
  }
}

/deep/.el-table thead .cell {
  text-align: center !important;
}
/deep/.el-table td,
.el-table th {
  text-align: center;
}
.money {
  background: #fff;
  padding: 10px;
  margin-bottom: 15px;
  .contentTotal {
    p {
      display: inline-block;
      font-size: 15px;
      margin-right: 20px;
      color: #dd6161;
      margin: 15px 0 15px 10px;
    }
  }
}
// /deep/.el-button {
//   padding: 8px 10px;
// }
/deep/.el-table thead {
  color: #2d7edf;
  .cell {
    text-align: left;
  }
}
.address {
  background: #fff;
  padding: 10px;
  margin: 15px 0;
  ul {
    margin: 10px 0;
    li {
      margin-left: 50px;
      line-height: 40px;
      font-size: 15px;
      p {
        display: inline-block;
        margin-right: 50px;
      }
    }
  }
}
.orderBox {
  background: #fff;
  padding: 10px;
}
.total {
  margin: 15px 0;
  background: #fff;
  padding: 20px 10px;
  text-align: right;
  p {
    display: inline-block;
    font-size: 15px;
    color: #2d7edf;
    margin-left: 30px;
    font-weight: bold;
  }
}
.fix {
  background: #fff;
  padding: 10px;
  margin-bottom: 20px;
}
.headerNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  > span {
    color: #2d7edf;
  }
  .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    p {
      margin-left: 10px;
      font-size: 15px;
      color: #333;
    }
  }
}
/deep/.el-dialog__body {
  padding: 10px 20px;
}
.qrcode {
  > .div {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    span {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
  }
}
#contentQr {
  height: 150px;
  width: 150px;
  margin: 20px auto 10px;
}
</style>
